import React, {Component} from "react";

class TodoItem extends Component {
    constructor(props) {
        super(props);
        this.handleClickDiv = this.handleClickDiv.bind(this);
    }

    /**
     * 当父组件的数据发生改变时，子组件并不会重新渲染了，原因就是子组件shouldComponentUpdate
     * 我的子组件被渲染一次之后，如果子组件需要更新，那么强制的要求不更新
     * @param nextProps 当组件要被更新的时候，接下来的props会变成什么样
     * @param nextState 接下来state会变化成什么样
     * @param nextContext 如果content改变了，重新渲染，如果没有，则不渲染
     * @returns {boolean}
     */
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (nextProps.context !== this.props.context) {
            return true;
        }
        return false;
    }

    render() {
        console.log('child render');
        const {context} = this.props;
        return (
            <div onClick={this.handleClickDiv}>{context}</div>
        )
    }


    handleClickDiv() {
        const {index, handleDeleteItem} = this.props;
        handleDeleteItem(index);
    }
}

export default TodoItem;